<template>
  <div>
    <!-- 模板中会自动读取ref对象的value属性值 -->
    <h2>{{count}}</h2>
    <button @click="increment">加1</button>
  </div>
</template>
<script lang="ts">
  import {
    ref
  } from 'vue'
  export default {
    name: 'About',

    beforeCreate () {
      console.log('beforeCreate()')
    },

    /* 
    在beforeCreate之前调用
    函数体中没有this
    所有组合API函数都在此调用
    */
    setup () {
      console.log('setup', this)

      // 创建一个ref响应式对象
      let count = ref(0)
      console.log(count)

      function increment() {
        /* 在js中必须通过value属性来修改ref对象包含数据 */
        count.value += 1
      }

      return { // 返回对象中的数据模板可以直接使用  ==> 相当于data与methods的全体
        count,
        increment
      }
    }
  }
</script>